<template>
  <div v-if="content" class="content-view">
    <!-- 第一部分：标题 -->
    <h1 class="content-title">{{ content.title }}</h1>

    <!-- 第二部分：作者信息 -->
    <div class="content-meta">
      <span>作者：{{ content.author }}</span>
      <span>发布时间：{{ formatDate(content.publishTime) }}</span>
      <span>类型：{{ content.type }}</span>
      <span>
        标签：
        <el-tag
          v-for="(tag, index) in content.tags"
          :key="index"
          size="small"
          type="info"
        >{{ tag }}</el-tag>
      </span>
    </div>

    <!-- 第三部分：正文内容 -->
    <div class="content-body" v-html="content.body"></div>

    <!-- 第四部分：浏览、点赞 -->
    <div class="content-stats">
      <span>浏览：{{ content.views }}</span>
      <span>
        点赞：
          <el-button type="text" @click="toggleLike" style="padding:0; border:none; background:none;">
            <svg
              :fill="liked ? 'red' : '#999'"
              viewBox="0 0 24 24"
              width="24"
              height="24"
            >
              <path
                d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 
                4.42 3 7.5 3c1.74 0 3.41 0.81 4.5 2.09C13.09 3.81 14.76 3 16.5 
                3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
              />
            </svg>
          </el-button>
        <span class="like-count">{{ likes }}</span>
      </span>
    </div>

    <!-- 评论区整体容器 -->
    <div class="comment-section">
      <!-- 标题 + 分界线 -->
      <div class="comment-header">
        <h3>欢迎提问或留下阅读感受</h3>
      </div>

      <!-- 评论输入框 + 发布按钮 -->
      <div class="comment-box">
        <el-input
          type="textarea"
          v-model="newComment"
          placeholder="写下你的评论..."
          maxlength="300"
          :rows="4"
        />
        <el-button
          type="primary"
          size="small"
          class="comment-btn"
          @click="submitComment"
        >
          发布
        </el-button>
      </div>

      <!-- 评论列表 -->
      <div class="comment-list">
        <el-empty description="暂无评论" v-if="comments.length === 0" />
        <div
          class="comment-item"
          v-for="(comment, index) in comments"
          :key="index"
        >
          <div class="comment-meta">
            <strong>{{ comment.user }}</strong>
            <span>{{ comment.time }}</span>
          </div>
          <div class="comment-content">{{ comment.content }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { fetchContentById } from '@/api/content';


const route = useRoute();
const id = route.params.id; // 或者用props方式接收
const content = ref(null);
const likes = ref(0);
const liked = ref(false);

const newComment = ref('');  // 评论输入框绑定的数据

function submitComment() {
  if (!newComment.value.trim()) {
    // 这里可以用 Element Plus 的消息提示
    ElMessage.warning('评论内容不能为空');
    return;
  }
  // 你写提交评论逻辑
  console.log('提交评论：', newComment.value);

  // 清空输入框
  newComment.value = '';
}

watch(content, (newVal) => {
  if (newVal) {
    likes.value = newVal.likes || 0;
    // 可以根据用户是否点过赞，设置liked.value = true/false
  }
});

onMounted(() => {
  fetchContentById(id)
    .then(res => {
      content.value = res; // 直接拿data
      console.log('res:', content.id);
    })
    .catch(err => {
      console.error('获取内容失败:', err);
    });
});

function toggleLike() {
  if (liked.value) {
    likes.value--;
    liked.value = false;
    // 调用取消点赞接口
  } else {
    likes.value++;
    liked.value = true;
    // 调用点赞接口
  }
}

const comments = ref([
  {
    user: '小明',
    time: '2025-08-08 10:00',
    content: '这篇文章写得真好！'
  },
  {
    user: '小红',
    time: '2025-08-08 11:30',
    content: '感谢分享，收获很多。'
  },
  {
    user: '张三',
    time: '2025-08-08 12:15',
    content: '期待更多类似内容。'
  }
]);

function formatDate(dateStr) {
  if (!dateStr) return '';
  const d = new Date(dateStr);
  if (isNaN(d)) return dateStr; // 无法转换时返回原串
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${y}-${m}-${day}`;
}
</script>

<style scoped>
.content-view {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

.content-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.content-meta {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}
.content-meta span {
  margin-right: 15px;
}

.content-body {
  background-color: #fff;          /* 白色背景 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 轻微阴影 */
  padding: 20px 24px;              /* 内边距，左右稍宽 */
  border-radius: 12px;             /* 圆角 */
  text-align: justify;             /* 两端对齐 */
  line-height: 1.8;                /* 行间距 */
  color: #333;                    /* 字体颜色深一点 */
  font-size: 16px;                 /* 字号适中 */
  user-select: text;               /* 允许文字选中 */
  margin-bottom: 20px;
}

.content-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  color: #666;
  margin: 16px 0;
}

.content-stats span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.like-btn {
  cursor: pointer;
  font-size: 20px;
  color: #999;
  transition: color 0.3s ease;
  padding: 0;
  border: none;
  background: none;
}

.like-btn.liked {
  color: #f56c6c; /* 红色 */
}

.like-btn:hover {
  color: #f56c6c;
}

.content-title {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 28px;
  color: #303133;
}

/* 让点赞数数字稍微突出 */
.like-count {
  font-weight: 600;
  color: #f56c6c;
  user-select: none;
}

.comment-header {
  font-weight: 600;
  font-size: 20px;
  color: #409EFF; /* 主色 */
  margin-bottom: 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid #409EFF;
  user-select: none; /* 防止误选 */
}

.comment-box {
  position: relative;
  margin-bottom: 30px;
}
.comment-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.comment-list {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.comment-item {
  background: #fff;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease;
}

.comment-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #888;
  margin-bottom: 8px;
  font-weight: 500;
}

.comment-meta strong {
  color: #409EFF; /* 主色强调用户名 */
}

.comment-content {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  white-space: pre-wrap; /* 支持换行 */
  text-align: justify;   /* 两端对齐 */
}
</style>
